<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!-- 申明IE浏览器需要用最新的渲染引擎来渲染当前的页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>ZhangLi</title>

    <!-- Bootstrap -->
    <!-- 核心css文件 -->
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!--  注意  要在http形式下打开 页面 才能正常使用下面两个文件-->
    <!--[if lt IE 9]>
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond/respond.js"></script>
    <![endif]-->
    <script src='js/rem.js'></script>
    <!--自己的css文件-->
    <link rel="stylesheet" type="text/css" href="css/iconfont.css">
    <!--<link rel="stylesheet" href="css/index.css"/>-->
    <link rel="stylesheet" href="css/a.css"/>
</head>
<body>
<div class="zl-content">
    <div class="container">
        <!--导航-开始-->
        <div class="nav-box">
            <ul class="nav nav-tabs nav-pills" role="tablist">
                <li role="presentation" class="active">
                    <a href="#About" aria-controls="home" role="tab" data-toggle="tab">About</a>
                </li>
                <li role="presentation">
                    <a href="#Education" aria-controls="profile" role="tab" data-toggle="tab">Education</a>
                </li>
                <li role="presentation">
                    <a href="#Experience" aria-controls="messages" role="tab" data-toggle="tab">Experience</a>
                </li>
                <li role="presentation">
                    <a href="#Skills" aria-controls="settings" role="tab" data-toggle="tab">Skills</a>
                </li>
            </ul>
        </div>
        <!--导航-结束-->

        <div class="tab-content">
            <!--关于我-->
            <div role="tabpanel" class="tab-pane active" id="About">About me
                <div class="zl-about text-center">
                    <div class="row row-bottom-padded-sm">
                        <div class="col-md-12">
                            <figure>
                                <img src="images/IMG_2356.JPG" alt="">
                            </figure>
                            <h1>张黎</h1>
                            <p>出生地：<a href="#">陕西省</a></p>
                            <p>出生日期：<a href="#">1992年</a></p>
                            <p>联系电话：<a href="#">15619235087</a></p>
                            <p>邮箱：<a href="#">892395819@qq.com</a></p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 fh5co-counter">
                            <div class="about-number row-left">2年</div>
                            <div class="about-text">
                                <h3 class="border-bottom"><a href="#">产品运营</a>工作经验</h3>
                                <p>学习能力与对环境的适应能力强，抗压能力强，能很快的适应新的环境并融入进去;工作中能以充沛的精力、刻苦钻研的精神努力工作，不断提                                     高自己的工作能力，可以接受出差和加班;工作能力强、效率高，具有团队协作精神受到领导肯定，职级晋升;踏实稳重，生活态度积极向上，                                     喜欢交朋友。
                                </p>

                            </div>
                        </div>
                    </div>
                    <ul class='foot-icon'>
                        <li>
                            <a href="javascript:;">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-github"></use>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-youjian"></use>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-unie61d"></use>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-weixin"></use>
                                </svg>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!--教育背景-->
            <div role="tabpanel" class="tab-pane" id="Education">Educational Background
                <div class="zl-education text-center">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="edu-con">
                                <div class="edu-icon">
                                    <span class="glyphicon glyphicon-education" aria-hidden="true"></span>
                                </div>
                                <div class="edu-text">
                                    <h3>2011年9月-2015年7月</h3>
                                    <p class='zl-school'>吉林农业大学</p>
                                </div>
                            </div>
                            <div class="edu-list">
                                <div class="edu-list-icon">
                                    <span class="glyphicon glyphicon-bookmark" aria-hidden="true"></span>
                                </div>
                                <div class="edu-list-text">
                                    <p>学历:本科</p>
                                </div>
                            </div>
                            <div class="edu-list">
                                <div class="edu-list-icon">
                                    <span class="glyphicon glyphicon-bookmark" aria-hidden="true"></span>
                                </div>
                                <div class="edu-list-text">
                                    <p>专业：计算机科学与技术</p>
                                </div>
                            </div>
                            <div class="edu-list">
                                <div class="edu-list-icon">
                                    <span class="glyphicon glyphicon-bookmark" aria-hidden="true"></span>
                                </div>
                                <div class="edu-list-text">
                                    <!--<h2>GPA</h2>-->
                                    <p>GPA：3.60</p>
                                </div>
                            </div>
                            <div class="edu-list">
                                <div class="edu-list-icon">
                                    <span class="glyphicon glyphicon-bookmark" aria-hidden="true"></span>
                                </div>
                                <div class="edu-list-text">
                                    <h2>主修课程</h2>
                                    <p class="zl-class">C++程序设计、数字电子技术基础、数据结构
                                        、java语言、计算机组成原理、计算机网络、嵌入式系统及应用、操作系统、网络工程、数据库原理、Linux操作系统</p>
                                    <!--<p class="zl-class">java语言、计算机组成原理、计算机网络</p>-->
                                    <!--<p class="zl-class">嵌入式系统及应用、操作系统</p>-->
                                    <!--<p class="zl-class">网络工程、数据库原理、Linux操作系统</p>-->

                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
            <!--经历-->
            <div role="tabpanel" class="tab-pane" id="Experience">My Experience
                <div class="zl-exp text-center">
                    <div class="container">
                        <!--总体是栅格系统 第一列偏移-->
                        <div class="col-md-2 col-md-offset-1">
                            <div class="zl-exp-title"><span>我的经历</span></div>
                        </div>
                        <div class="col-md-1">
                            <div class="zl-exp-line hidden-sm hidden-xs"></div>
                            <!-- Nav tabs -->
                            <ul class="nav zl-exp-tabs" role="tablist">
                                <li role="presentation" class="active">
                                    <a href="#home" aria-controls="home" role="tab" data-toggle="tab">
                                        <span class="zl-exp-icon ">获奖经历</span>
                                    </a>
                                </li>
                                <li role="presentation">
                                    <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
                                        <span class="zl-exp-icon">工作经历</span>
                                    </a>
                                </li>
                                <li role="presentation">
                                    <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">
                                        <span class="zl-exp-icon">在校实践</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-7 col-md-offset-1">
                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="home">
                                    <ul>
                                        <li>获得吉林省政府奖学金</li>
                                        <li>获得吉林省农学“781”奖助学金</li>
                                        <li>多次获得校非农专业奖学金</li>
                                        <li>多次获得“优秀团员”</li>
                                        <li>在职期间获得“优秀员工”</li>
                                    </ul>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="profile">
                                    <ul>
                                        <li>和创（北京）科技股份有限公司</li>
                                        <li><span class="hidden-xs">2015.7-2016.10</span> 产品运营</li>
                                        <li>1.运营数据（用户活跃度、续费率、生命周期、行业等）分析，向业务部门以及上级输出报表以及分析报告；</li>
                                        <li>2.监测社区日常数据，和社区用户互动，分析用户需求，完善社区；</li>
                                        <li>3.与产品、技术对接优化运营中心平台数据指标、产品功能等，优化产品</li>
                                    </ul>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="messages">
                                    <ul>
                                        <li><span class="hidden-xs">2011/10-2013/06</span> 社团联合会策划部</li>
                                        <li>组织策划社团联合会相关活动</li>
                                        <li><span class="hidden-xs">2014/01-2014/02</span> 长春会展中心</li>
                                        <li>会展布置 资料发放</li>
                                    </ul>

                                </div>
                                <!--<div role="tabpanel" class="tab-pane" id="settings">4</div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--技能-->
            <div role="tabpanel" class="tab-pane" id="Skills">My Skills
                <div class="zl-skills text-center">
                    <div class="row">
                        <div class="col-md-12 ">
                            <div class="skill-con">
                                <div class="skill-icon">
                                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                                </div>
                                <div class="skill-text">
                                    <p>My Skills</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12 text-center">
                            <div class="skills-list-text">
                                <span>
                                    <strong>HTML</strong>90%
                                </span>
                                <div id='casBox-Html'>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12 text-center">
                            <div class="skills-list-text">
                                <span>
                                    <strong>CSS</strong>90%
                                </span>
                                <div id='casBox-css'>
                                    <!--<canvas width="160" height="160" id="cas"></canvas>-->
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12 text-center">
                            <div class="skills-list-text">
                                <span>
                                    <strong>javascript</strong>80%
                                </span>
                                <div id='casBox-js'>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12 text-center">
                            <div class="skills-list-text">
                                <span>
                                    <strong>jQuery</strong>80%
                                </span>
                                <div id='casBox-jq'>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12 text-center">
                            <div class="skills-list-text">
                                <span>
                                    <strong>Bootstrap</strong>80%
                                </span>
                                <div id='casBox-bt'>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-12 text-center">
                            <div class="skills-list-text">
                                <span>
                                    <strong>Angular</strong>70%
                                </span>
                                <div id='casBox-ng'>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!--因为  bootstrap  是依赖 jquery  引用jquery文件-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="lib/jquery/jquery.js"></script>
<!-- js 核心文件-->
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/swipe.js"></script>
<script src="js/iconfont.js"></script>
<script src="js/index.js"></script>
</body>
</html>